<template>
	<view>
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">榜单</block>
		</cu-custom>
		<view class="" style="position: sticky;z-index: 9;" :style="{top:CustomBar+'px'}">
			<!-- 搜索 -->
			<view class="">
				<div-search></div-search>
			</view>
			<view class="t_content">
				<!-- 分类 -->
				<view class="goods_category">
					<view
						:class="'goods_category_item '+ (index%6==0 ? 'itemPadding1': (index+1)%6==0 ? 'itemPadding2' : 'itemPadding') "
						v-for="(item,index) in goodsCategory" :key="index" @click="catClick(item,index)">
						<view :class="'tab-select '+ (index==currentCat? 'cat_active':'')" v-if="cateStatus||index < 6">
							<view class="" v-if="item.typeName!='down'">{{item.typeName}}</view>
							<view class="text-bold" v-else>
								<text v-if="!cateStatus" class="cuIcon-unfold"></text>
								<text v-else class="cuIcon-fold"></text>
							</view>
						</view>
					</view>
				</view>
				<!-- 榜单 -->
				<view class="goods_com">
					<view v-for="(item, index) in comList" :key="index" @click="tabSelect(item,index)"
						class="goodsCom_info">
						<view class="" :class="'cu-item '+(index==currentTabCur? 'tab_active':'')">
							{{item.rankingName?item.rankingName:''}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="bg-gray1" v-if="showGoods">
			<div-goods v-model="dataList" ref="divGoods"  @goodsLoading="goodsLoading"></div-goods>
			<view :class="'cu-load ' + (loadmore3?'loading':'over')"
				:style="{backgroundColor:`${pageDivData.pageBackGroundColor}`}"></view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'

	import divSearch from "@/components/search-model/search-model.vue";
	import divGoods from "@/components/div-components/div-goods/div-goods.vue";


	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme,
				goodsCategory: [], // 分类
				currentCat: 0, // 当前选中分类
				cateStatus: false, // 分类状态 true展开，false收起
				comList: [], // 榜单
				currentTabCur: 0, // 当前选中榜单
				load: true,
				showGoods: false,
				loadmore3: false,
				dataList: {
					background: '#ffffff',
					pageUpSpacing: "0",
					pageLRSpacing: "20",
					pageGoodsSpacing: "20",
					paddingLRSpacing: "20",
					pageUDSpacing: "30",
					goodsList: []
				}
			};
		},
		components: {
			divSearch,
			divGoods
		},
		onLoad(options) {
			app.initPage().then(res => {});
		},
		onReachBottom() {
			console.log(this.$refs,12341564)
			if (this.$refs.divGoods && !this.loadmore3) {
				this.$refs.divGoods.getGoods()
			}
		},

		onShow() {
			app.initPage().then(res => {
				app.checkLogin('tabbar').then(res => {
					this.goodsCategoryTree()
					this.getRankList(11)
					this.currentCat = 0
					this.currentTabCur = 0
				})
			})

		},

		methods: {
			// 获取分类
			goodsCategoryTree() {
				api.getRankType().then(res => {
					const getGoodsCategory = res.data ? res.data : []
					if (getGoodsCategory.length > 5) {
						getGoodsCategory.splice(5, 0, {
							typeName: 'down'
						})
					}
					this.goodsCategory = getGoodsCategory
				})
			},
			// 获取分类对应的榜单
			getRankList(typeId) {
				api.getRankList({
					typeId
				}).then(res => {
					this.comList = res.data ? res.data : []
					if (this.comList.length) {
						if (this.comList.length < 4) {
							this.comList.length = 4
						}
						this.getRankingGoods(this.comList[0].id)
					}
				})
			},
			// 查询商品
			getRankingGoods(rankingId) {
				this.showGoods = false
				this.dataList.goodsList = []
				api.getRankingGoods({
					current: 1,
					size: 20,
					rankingId
				}).then(res => {
					const data = res.data ? res.data : []
					if (data.length) {
						let goodsList = []
						data.forEach(v => {
							const obj = v.goodsSpu
							obj.skus = v.goodsSkus
							goodsList.push(obj)
						})
						this.$set(this.dataList, 'goodsList', goodsList)
						this.showGoods = true
					}
				})
			},
			// 切换分类
			catClick(item, i) {
				if (i == 5) {
					this.cateStatus = !this.cateStatus
				} else {
					this.currentCat = i
					this.currentTabCur = 0
					this.getRankList(item.id)
				}
			},
			// 切换榜单
			tabSelect(item, i) {
				this.currentTabCur = i
				this.getRankingGoods(item.id)
			},
			goodsLoading(data) {
				this.loadmore3 = data
			}

		}
	};
</script>
<style scoped>
	.t_content {
		background-image: linear-gradient(#FBBECE, #F6F7F9);
		font-size: 30rpx;
		padding-bottom: 30rpx;
	}

	.t_content .goods_category {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		color: #4E5969;
		font-weight: 400;
		border-radius: 20rpx;
		margin: 0 20rpx;
		padding: 10rpx 25rpx;
	}

	.t_content .goods_category .goods_category_item {
		display: flex;
		justify-content: center;
	}

	.t_content .goods_category .itemPadding {
		padding-right: calc((100% - 360rpx) / 10);
		padding-left: calc((100% - 360rpx) / 10);
	}

	.t_content .goods_category .itemPadding1 {
		padding-right: calc((100% - 360rpx) / 10);
	}

	.t_content .goods_category .itemPadding2 {
		padding-left: calc((100% - 360rpx) / 10);
	}

	.t_content .goods_category .goods_category_item .tab-select {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.t_content .goods_category .goods_category_item .cat_active {
		color: #FF001F;
	}

	.t_content .goods_com {
		height: 80rpx;
		color: #4E5969;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 0 40rpx;
	}

	.t_content .goods_com .goodsCom_info {
		flex: 1;
	}


	.t_content .goods_com .cu-item {
		/* margin: 0 35rpx; */
		padding-bottom: 15rpx;
		display: inline-block;
	}

	.t_content .goods_com .goodsCom_info:first-child {
		text-align: left;
	}

	.t_content .goods_com .goodsCom_info:nth-child(2) {
		text-align: left;
	}

	.t_content .goods_com .goodsCom_info:last-child {
		text-align: right;
	}

	.t_content .goods_com .tab_active {
		color: #FF001F;
		border-bottom: 6rpx solid #FF001F;
	}

	.goods_content {}
</style>